<template>
  <div class="statistics">
    <div class="statistics-board1">
      <el-row :gutter="10">
        <el-col :span="4">
          <div>
            <el-card shadow="hover">
              <div class="el-statistic">
                <el-row>
                  <el-col :span="18">
                    <div class="head">
                      <span class="title">订单数</span>
                    </div>
                    <div class="con">
                      <span class="number">{{ form.orderCount }}</span>
                    </div>
                  </el-col>
                  <el-col :span="6">
                    <div style="font-size: 10px">
                      <DataAnalysis />
                    </div>
                  </el-col>
                </el-row>
              </div>
            </el-card>
          </div>
        </el-col>
        <el-col :span="4">
          <div>
            <el-card shadow="hover">
              <div class="el-statistic">
                <el-row>
                  <el-col :span="18">
                    <div class="head">
                      <span class="title">订单金额</span>
                    </div>
                    <div class="con">
                      <span class="number">¥{{ form.orderAmount }}</span>
                    </div>
                  </el-col>
                  <el-col :span="6">
                    <div style="font-size: 10px">
                      <Money />
                    </div>
                  </el-col>
                </el-row>
              </div>
            </el-card>
          </div>
        </el-col>
        <el-col :span="4">
          <div>
            <el-card shadow="hover">
              <div class="el-statistic">
                <el-row>
                  <el-col :span="18">
                    <div class="head">
                      <span class="title">平均订单金额</span>
                    </div>
                    <div class="con">
                      <span class="number"
                        >¥{{
                          form.orderCount == 0
                            ? 0
                            : (form.orderAmount / form.orderCount).toFixed(2)
                        }}</span
                      >
                    </div>
                  </el-col>
                  <el-col :span="6">
                    <div style="font-size: 10px">
                      <Coin />
                    </div>
                  </el-col>
                </el-row>
              </div>
            </el-card>
          </div>
        </el-col>
        <el-col :span="4">
          <div>
            <el-card shadow="hover">
              <div class="el-statistic">
                <el-row>
                  <el-col :span="18">
                    <div class="head">
                      <span class="title">待发货</span>
                    </div>
                    <div class="con">
                      <span class="number">{{ form.waitingDeliverCount }}</span>
                    </div>
                  </el-col>
                  <el-col :span="6">
                    <div style="font-size: 10px">
                      <Van />
                    </div>
                  </el-col>
                </el-row>
              </div>
            </el-card>
          </div>
        </el-col>
        <el-col :span="4">
          <div>
            <el-card shadow="hover">
              <div class="el-statistic">
                <el-row>
                  <el-col :span="18">
                    <div class="head">
                      <span class="title">完成订单数</span>
                    </div>
                    <div class="con">
                      <span class="number">{{ form.finishOrderCount }}</span>
                    </div>
                  </el-col>
                  <el-col :span="6">
                    <div style="font-size: 10px">
                      <Finished />
                    </div>
                  </el-col>
                </el-row>
              </div>
            </el-card>
          </div>
        </el-col>
        <el-col :span="4">
          <div>
            <el-card shadow="hover">
              <div class="el-statistic">
                <el-row>
                  <el-col :span="18">
                    <div class="head">
                      <span class="title">门店数</span>
                    </div>
                    <div class="con">
                      <span class="number">{{ form.branchCount }}</span>
                    </div>
                  </el-col>
                  <el-col :span="6">
                    <div style="font-size: 10px">
                      <Shop />
                    </div>
                  </el-col>
                </el-row>
              </div>
            </el-card>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="10" style="margin-top: 20px">
        <el-col :span="4">
          <div>
            <el-card shadow="hover">
              <div class="el-statistic">
                <el-row>
                  <el-col :span="18">
                    <div class="head">
                      <span class="title">店均订单</span>
                    </div>
                    <div class="con">
                      <span class="number">{{ form.branchAvgOrderCount }}</span>
                    </div>
                  </el-col>
                  <el-col :span="6">
                    <div style="font-size: 10px">
                      <DataLine />
                    </div>
                  </el-col>
                </el-row>
              </div>
            </el-card>
          </div>
        </el-col>
        <el-col :span="4">
          <div>
            <el-card shadow="hover">
              <div class="el-statistic">
                <el-row>
                  <el-col :span="18">
                    <div class="head">
                      <span class="title">店均销售</span>
                    </div>
                    <div class="con">
                      <span class="number"
                        >¥{{ form.branchAvgAmountCount }}</span
                      >
                    </div>
                  </el-col>
                  <el-col :span="6">
                    <div style="font-size: 10px">
                      <Money />
                    </div>
                  </el-col>
                </el-row>
              </div>
            </el-card>
          </div>
        </el-col>
        <el-col :span="4">
          <div>
            <el-card shadow="hover">
              <div class="el-statistic">
                <el-row>
                  <el-col :span="18">
                    <div class="head">
                      <span class="title">商品数</span>
                    </div>
                    <div class="con">
                      <span class="number">{{ form.itemCount }}</span>
                    </div>
                  </el-col>
                  <el-col :span="6">
                    <div style="font-size: 10px">
                      <Goods />
                    </div>
                  </el-col>
                </el-row>
              </div>
            </el-card>
          </div>
        </el-col>
        <el-col :span="4">
          <div>
            <el-card shadow="hover">
              <div class="el-statistic">
                <el-row>
                  <el-col :span="18">
                    <div class="head">
                      <span class="title">销售商品数</span>
                    </div>
                    <div class="con">
                      <span class="number">{{ form.itemSaleCount }}</span>
                    </div>
                  </el-col>
                  <el-col :span="6">
                    <div style="font-size: 10px">
                      <Sell />
                    </div>
                  </el-col>
                </el-row>
              </div>
            </el-card>
          </div>
        </el-col>
        <el-col :span="4">
          <div>
            <el-card shadow="hover">
              <div class="el-statistic">
                <el-row>
                  <el-col :span="18">
                    <div class="head">
                      <span class="title">渠道商品数</span>
                    </div>
                    <div class="con">
                      <span class="number">{{
                        form.itemSaleChannelCount
                      }}</span>
                    </div>
                  </el-col>
                  <el-col :span="6">
                    <div style="font-size: 10px">
                      <Guide />
                    </div>
                  </el-col>
                </el-row>
              </div>
            </el-card>
          </div>
        </el-col>
        <el-col :span="4">
          <div>
            <el-card shadow="hover">
              <div class="el-statistic">
                <el-row>
                  <el-col :span="18">
                    <div class="head">
                      <span class="title">会员数</span>
                    </div>
                    <div class="con">
                      <span class="number">{{ form.memberCount }}</span>
                    </div>
                  </el-col>
                  <el-col :span="6">
                    <div style="font-size: 10px">
                      <User />
                    </div>
                  </el-col>
                </el-row>
              </div>
            </el-card>
          </div>
        </el-col>
      </el-row>
    </div>
    <div id="chart1" style="width: 100%; height: 500px; margin-top: 30px"></div>
  </div>
</template>

<script setup name="Index">
import { statistics } from "@/api/index";
import { ref, onMounted } from "vue";
import * as echarts from "echarts";

let form = ref({});
let itemSaleTop10 = ref([]);
let itemSaleAmountTop10 = ref([]);
let loginStatisticsXAxis = ref([]);
let loginStatistics = ref([]);

function loadData() {
  statistics()
    .then((res) => {
      form.value = res.data;
      if (form.value.topItemSaleStatisticsByMonth) {
        form.value.topItemSaleStatisticsByMonth.forEach((item) => {
          itemSaleTop10.value.push(item.itemSaleName);
          itemSaleAmountTop10.value.push(item.amount);
        });
      }
      if (form.value.loginStatistics) {
        form.value.loginStatistics.forEach((loginStatistic) => {
          loginStatisticsXAxis.value.push(loginStatistic.date);
          loginStatistics.value.push(loginStatistic.count);
        });
      }
      draw();
    })
    .catch((err) => {
      console.log(err);
    });
  draw();
}

function draw() {
  // 访问人数统计
  let chart1 = echarts.init(document.getElementById("chart1"));
  let option1 = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
      backgroundColor: "#fff", // 悬浮框背景色
      borderColor: "#000", // 悬浮框边框颜色
      borderWidth: 1, // 悬浮框边框宽度
      textStyle: {
        // 悬浮框文字样式
        color: "#000",
        fontSize: 12,
      },
    },
    grid: {
      left: 0,
      right: 0,
      top: 30,
      bottom: 0,
      containLabel: true,
    },
    legend: {
      data: ["本月交易额", "本月订单量", "本月退单量"],
    },
    xAxis: {
      type: "category",
      data: [
        "2024/07/09",
        "2024/07/10",
        "2024/07/11",
        "2024/07/12",
        "2024/07/13",
        "2024/07/14",
        "2024/07/15",
      ],
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        name: "本月交易额",
        data: [820, 2300, 3600, 930, 1632, 3020, 3320],
        type: "line",
        smooth: true,
      },
      {
        name: "本月订单量",
        data: [380, 1020, 2590, 300, 1230, 2510, 2660],
        type: "line",
        smooth: true,
      },
      {
        name: "本月退单量",
        data: [240, 510, 1250, 148, 520, 792, 425],
        type: "line",
        smooth: true,
      },
    ],
  };
  chart1.setOption(option1);
}
onMounted(() => {
  loadData();
});
</script>

<style scope>
.statistics .el-card .title {
  font-size: 15px;
}
.statistics .el-card .number {
  font-size: 25px;
}
</style>
